<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="js/angular.js"></script>
</head>
<body ng-app="demo">
<!--
ng-app      指定一个应用程序
ng-bind     指定将元素值绑定到应用程序上
ng-init     初始化
ng-repeat   重复元素
-->
<!--22.校验-->
<p>
<form ng-controller="testCon22" name="form22">
    邮箱：<input name="email22" type="email" ng-model="user22">
    <span ng-show="form22.email22.$dirty && form22.email22.$invalid" style="color:red;">
        <span ng-show="form22.email22.$error.required">邮箱是必须的</span>
        <span ng-show="form22.email22.$error.email">非法邮箱</span>
    </span>
    <br>
</form>
</p>


<!--21.下拉列表选项交互-->
<form>
    <select ng-model="toggle21">
        <option value="">
        <option value="dogs">Dogs
        <option value="tuts">Tutorials
        <option value="cars">Cars
    </select>
</form>
<div ng-switch="toggle21" ng-init="toggle21='dogs'">
    <div ng-switch-when="">
        当前选中的是第一个
    </div>
    <div ng-switch-when="dogs">
        当前选中的是第二个
    </div>
    <div ng-switch-when="tuts">
        当前选中的是第三个
    </div>
    <div ng-switch-when="cars">
        当前选中的是第四个
    </div>
</div>

<!--20.单选框-->
<form>
    <input type="radio" ng-model="toggle20" value="rb1">选项1
    <input type="radio" ng-model="toggle20" value="rb2">选项2
    <input type="radio" ng-model="toggle20" value="rb3">选项3
    <input type="radio" ng-model="toggle20" value="rb4">选项4
</form>
<div ng-switch="toggle20">
    <div ng-switch-when="rb1">
        当前选中的是第一个
    </div>
    <div ng-switch-when="rb2">
        当前选中的是第二个
    </div>
    <div ng-switch-when="rb3">
        当前选中的是第三个
    </div>
    <div ng-switch-when="rb4">
        当前选中的是第四个
    </div>
</div>

<!--19.表单复选框-->
<div>
    点击选中，显示隐藏内容<input type="checkbox" ng-model="toggle19">
    <p ng-hide="toggle19">点击显示隐藏</p>
</div>


<!--18.表格-->
<table ng-controller="testCon18">
    <tr ng-repeat="x in msgs18">
        <td>{{$index +1 }}</td>
        <td>{{x.Name}}</td>
        <td>{{x.City}}</td>
        <td>{{x.Country}}</td>
    </tr>
</table>

<!--17.ng-options-->
<div ng-controller="testCon17">
    <select ng-init="msg17=msgs17[0]" ng-model="msg17" ng-options="'结果：'+x for x in msgs17"></select>
</div>

<!--16.自定义服务-->
<div ng-init='data16 = [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id":
        12,"name": "test abc"} ]'>
    <ul>
        <li ng-repeat="data16item in data16 | filter16">名字：{{data16item.name}} 年龄：{{data16item.age}}</li>
    </ul>
</div>

<!--15.自定义服务-->
<div ng-controller="testCon15">
    <p>名字:<input ng-model="msg15"></p>
    <input type="button" value="获取我的名字" ng-click="click15()">
</div>

<!--14.$interval服务-->
<div ng-controller="testCon14">
    <p>计时器:<input ng-model="msg14"></p>
    <input type="button" value="点击开始计时" ng-click="click14()">
</div>

<!--13.timeout服务-->
<div ng-controller="testCon13">
    <p>2秒后获取信息:<input ng-model="msg13"></p>
    <input type="button" value="点击获取信息" ng-click="click13()">
</div>

<p>12.http服务</p>
<div ng-controller="testCon12">
    <p>获取信息为:<input ng-model="msg12"></p>
    <input type="button" value="点击获取信息" ng-click="click12()">
</div>

<!--11.location服务获取URL-->
<div ng-controller="testCon11">
    <p>当前的URL:<input ng-model="currUrl"></p>
    <input type="button" value="点击获取URL" ng-click="click11()">
</div>


<!--10.数据过滤-->
<ul>
    <li>大小写转换：{{'huang' | uppercase}}</li>
    <li>货币转换：{{'1000' | currency:"美元 $"}}</li>
    <li>日期转换：{{'1490161945000' | date:"yyyy-MM-dd HH:mm:ss"}}</li>
    <li>小数位数：{{'3.14159' | number:3}}</li>
    <li>筛选对象：{{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id":
        12,"name": "test abc"} ] | filter:{'name':'iphone'} }}
    </li>
    <li>截取6位：{{'123456789' | limitTo:6}}</li>
    <li>截取6位：{{'123456789' | limitTo:-6}}</li>
    <li ng-init='datas=[{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id":
        12,"name": "test abc"} ]'>
        排序
        <ul>
            <li ng-repeat="person in datas | orderBy:'name'">{{person.name}} {{person.age}}</li>
        </ul>
    </li>
</ul>

<!--9.数据绑定-->
<div ng-controller="testCon9">
    姓名：<input type="text" ng-model="name9">
    <input type="button" value="点击" ng-click="click9()">
    <input ng-model="result9">
</div>


<!--8.数据绑定-->
<div ng-controller="testCon8">
    名字: <input ng-model="testCon1Name">
</div>

<!--7.数据验证-->
<form name="demo7" ng-init="myText = 'test@runoob.com'">
    Email:<input type="email" name="demo7_1" ng-model="myText" required></p>
    <p>状态</p>
    可用：{{demo7.demo7_1.$valid}}<br/>
    值改变：{{demo7.demo7_1.$dirty}}<br/>
    触摸：{{demo7.demo7_1.$touched}}
    <ul>
        <li>ng-valid: 验证通过</li>
        <li>ng-invalid: 验证失败</li>
        <li>ng-valid-[key]: 由$setValidity添加的所有验证通过的值</li>
        <li>ng-invalid-[key]: 由$setValidity添加的所有验证失败的值</li>
        <li>ng-pristine: 控件为初始状态</li>
        <li>ng-dirty: 控件输入值已变更</li>
        <li>ng-touched: 控件已失去焦点</li>
        <li>ng-untouched: 控件未失去焦点</li>
        <li>ng-pending: 任何为满足$asyncValidators的情况</li>
    </ul>
</form>

<!--6.自定义指令-->
<runoob-directive></runoob-directive>

<!--5.ng-repeat-->
<div ng-init="names=[{name:'Jani',country:'Norway'},{name:'Hege',country:'Sweden'},{name:'Kai',country:'Denmark'}]">
    <ul>
        <li ng-repeat="x in names">
            用户名：{{x.name}}，城市：{{x.country}}
        </li>
    </ul>
</div>

<!--4.初始化对象-->
<div ng-init="person={name:'John'}">
    名字：{{person.name}}
</div>

<!--3.表达式的格式-->
<p>第一个表达式：3+3 = {{3+3}}</p>

<!--2.ng-init初始化-->
<p>名字 :<span ng-bind="firstName"></span></p>

<!--1.双向绑定-->
<p>名字 : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
<script>
    var app = angular.module("demo", []);

    app.controller('testCon22', function ($scope) {
        $scope.user22 = "JohnDoe@163.com";
        $scope.password22 = "123456";
    });

    app.controller('testCon18', function ($scope) {
        $scope.msgs18 = [{
            "Name": "Alfreds",
            "City": "Berlin",
            "Country": "Germany"
        }, {
            "Name": "Ana",
            "City": "México D.F.",
            "Country": "Mexico"
        }, {
            "Name": "Antonio", "City": "México D.F.", "Country": "Mexico"
        }, {
            "Name": "Around",
            "City": "London",
            "Country": "UK"
        }]
    });

    app.controller('testCon17', function ($scope) {
        $scope.msgs17 = ["测试1", "测试2", "测试3", "测试4"];
    });

    //自定义服务
    app.service("user", function () {
        this.getUserName = function () {
            return "huangqiuyu";
        }
    });

    //自定义过滤器
    app.filter("filter16", ['user', function (user) {
        return function (x) {
            x.name = x.name + user.getUserName();
            return x;
        }
    }]);


    app.controller('testCon15', function ($scope, user) {
        $scope.click15 = function () {
            $scope.msg15 = user.getUserName();
        };
    });

    app.controller('testCon14', function ($scope, $timeout, $location, $interval) {
        $scope.click14 = function () {
            var i = 0;
            $interval(function () {
                i++;
                $scope.msg14 = "当前时间为：" + i;
            }, 500);
        };
    });

    app.controller('testCon13', function ($scope, $timeout, $location) {
        $scope.click13 = function () {
            $timeout(function () {
                $scope.msg13 = $location.absUrl();
            }, 1000);
        };
    });
    app.controller('testCon12', function ($scope, $http) {
        $scope.click12 = function () {
            $http({
                method: 'GET',
                url: 'http://www.runoob.com/try/angularjs/data/sites.php'
            }).then(function successCallback(response) {
                $scope.msg12 = "1111";
//                $scope.names = response.data.sites;
            }, function errorCallback(response) {
                // 请求失败执行代码
            });
        };
    });
    app.controller('testCon11', function ($scope, $location) {
        $scope.click11 = function () {
            $scope.currUrl = $location.absUrl();
        };
    });
    app.controller('testCon9', function ($scope) {
        $scope.name9 = "John Doe";
        $scope.click9 = function () {
            $scope.result9 = "say hello to " + $scope.name9;
        };
    });
    app.controller('testCon8', function ($scope) {
        $scope.testCon1Name = "John Doe";
    });
    app.directive("runoobDirective", function () {
        return {
            restrict: "AEC",//E = Element, A = Attribute, C = Class, M = Comment
            template: "<h1>自定义指令!</h1>"
        };
    });

</script>
</body>
</html>